 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width1">添加资源</div>
      </div>
      <div class="content-con">
        <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="right" :label-width="110" class="resource-item">
          <Form-item label="资源名称" prop="name">
            <i-input v-model="formValidate.name" size="large" placeholder="输入资源名称"></i-input>
          </Form-item>
          <Form-item label="资源标题" prop="title">
            <i-input v-model="formValidate.title" size="large" placeholder="输入资源标题"></i-input>
          </Form-item>
          <Form-item label="跳转URL" prop="jumpurl">
            <i-input v-model="formValidate.jumpurl" size="large" placeholder="输入跳转URL"></i-input>
          </Form-item>
          <Form-item label="授权名" prop="authorname">
            <i-input v-model="formValidate.authorname" size="large" placeholder="输入授权名"></i-input>
          </Form-item>
          <Form-item label="授权URL" prop="authorurl">
            <i-input v-model="formValidate.authorurl" size="large" placeholder="输入授权URL"></i-input>
          </Form-item>
          <Form-item label="资源类型" prop="resourcetype">
            <Radio-group v-model="formValidate.resourcetype" size="large">
              <Radio label="menu">
                  <span>菜单</span>
              </Radio>
              <Radio label="btn">
                  <span>按钮</span>
              </Radio>
            </Radio-group>
          </Form-item>
          <Form-item label="所属系统" prop="system">
            <Radio-group v-model="formValidate.system" size="large">
              <Radio label="select1">
                  <span>运营平台</span>
              </Radio>
              <Radio label="select2">
                  <span>商户系统</span>
              </Radio>
              <Radio label="select3">
                  <span>人工客服</span>
              </Radio>
            </Radio-group>
          </Form-item>
          <Form-item label="菜单图标" prop="icon">
            <i-input v-model="formValidate.icon" size="large" placeholder="输入icon图标"></i-input>
          </Form-item>
          <Form-item label="排序值" prop="order">
            <i-input v-model="formValidate.order" size="large" placeholder="输入排序值"></i-input>
          </Form-item>
          <Form-item label="属性" prop="type">
            <i-input v-model="formValidate.type" size="large" placeholder="输入属性，不清楚可留空"></i-input>
          </Form-item>
          <Form-item label="状态" prop="statu">
            <Radio-group v-model="formValidate.statu" size="large">
              <Radio label="start">
                  <span>启用</span>
              </Radio>
              <Radio label="stop">
                  <span>停止</span>
              </Radio>
            </Radio-group>
          </Form-item>
          <Form-item>
            <i-button @click="handleSubmit()" class="save" size="large">保存</i-button>
            <i-button class="save" size="large" @click="btnClick1">返回</i-button>
          </Form-item>
        </i-form>
      </div>
   </Card>

 </template>
 <script>

 export default {
   name: 'resource-add',
   props:{
     shadow: {
       type: Boolean,
       default: false
     }
   },
   data() {
     return {
       formValidate:{
         name: '',
         title: '',
         jumpurl: '',
         authorname: '',
         authorurl: '',
         resourcetype: 'menu',
         system: 'select1',
         icon: '',
         order: '',
         type: '',
         statu: 'start'
       },
       ruleValidate:{
         name:[
           {
             required: true,
             message: '输入资源名称',
             trigger: 'blur'
           }
         ],
         title:[
           {
             required: true,
             message: '输入用户昵称',
             trigger: 'blur'
           }
         ],
         jumpurl:[
           {
             required: true,
             message: '输入跳转URL',
             trigger: 'blur'
           }
         ],
         authorname:[
           {
             required: true,
             message: '输入授权名',
             trigger: 'blur'
           }
         ],
         authorurl:[
           {
             required: true,
             message: '输入授权URL',
             trigger: 'blur'
           }
         ],
         resourcetype:[
           {
             required: true,
             message: '请选择资源类型',
             trigger: 'change'
           }
         ],
         system:[
           {
             required: true,
             message: '请选择所属系统',
             trigger: 'change'
           }
         ],
         icon:[
           {
             required: true,
             message: '输入icon图标',
             trigger: 'blur'
           }
         ],
         order:[
           {
             required: true,
             message: '输入排序值',
             trigger: 'blur'
           }
         ],
         type:[
           {
             required: true,
             message: '输入属性，不清楚可留空',
             trigger: 'blur'
           }
         ],
         statu:[
           {
             required: true,
             message: '请选择状态',
             trigger: 'change'
           }
         ]
        }
     };
   },
   methods: {
     // 返回按钮
     btnClick1(){
       this.$router.push({name:'resource_management'})
     },
     //表单验证
     handleSubmit () {
       this.$refs['formValidate'].validate((valid) =>{
         if (valid) {
           this.$Message.success('提交成功!');
         } else {
           this.$Message.error('表单验证失败!');
         }
       })
     }
   }
 };
 </script>
 <style lang="less">
   .resource-item{
     width: 50%;
   }
   .resource-item .ivu-form-item-label{
     font-size: 14px;
   }
 </style>
